<template>
	<div>
		<div class="left">
			<div class="title">
				<span class="word">项目管理</span>
			</div>
			<div class="line"></div>
			<div class="middle">
				<div class="bottom">
					<div class="Btop">
						<div></div>
						<el-button @click="add = true">添加</el-button>
					</div>
					<div class="table">
						<el-table :data="xinxi.tableData">
							<el-table-column
								prop="project_name"
								label="项目名称"
								align="center"
							/>
							<el-table-column
								prop="city"
								label="城市"
								align="center"
							/>
							<el-table-column
								prop="function"
								label="功能"
								align="center"
							/>
							<el-table-column
								prop="create_time"
								label="线上时间"
								align="center"
							/>

							<el-table-column label="操作" align="center">
								<template #default="scope">
									<el-button
										size="small"
										class="smbtn"
										@click="
											handleupdate(
												scope.$index,
												scope.row
											)
										"
										>修改</el-button
									>
								</template>
							</el-table-column>
						</el-table>

						<div class="page">
							<el-pagination
								v-model:currentPage="obj.page"
								layout="prev, pager, next"
								@current-change="handleCurrentChange"
								:total="obj.total"
							/>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 新增弹出框 -->
	<div class="dialogs userDialog">
		<el-dialog v-model="add" title="新建项目">
			<div class="line4"></div>

			<el-form :model="addform">
				<el-form-item label="项目名称" :label-width="formLabelWidth1">
					<el-input
						v-model="xinxi.addproject.project_name"
						autocomplete="off"
						placeholder="请输入项目名称"
					/>
				</el-form-item>

				<el-form-item label="城市/省份" :label-width="formLabelWidth1">
					<el-cascader
						size="large"
						:options="xinxi.options"
						@change="qweqwe"
					>
					</el-cascader>
				</el-form-item>
				<el-form-item label="功能" :label-width="formLabelWidth1">
					<el-select
						v-model="xinxi.addproject.function"
						class="m-2"
						placeholder="请选择项目的功能"
						size="small"
					>
						<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="业主名称" :label-width="formLabelWidth1">
					<el-input
						v-model="xinxi.addproject.owner"
						autocomplete="off"
						placeholder="请输入业主名称"
					/>
				</el-form-item>
				<el-form-item label="总点数" :label-width="formLabelWidth1">
					<el-input
						v-model="xinxi.addproject.point"
						autocomplete="off"
						placeholder="请输入总点数"
					/>
				</el-form-item>
				<el-form-item label="图片" :label-width="formLabelWidth1">
					<el-upload
					v-model:file-list="fileList"
						:auto-upload="true"
						action="http://oao.zhichengshangxin.com/UploadsFile"
						class="upload-demo"
						:on-success="imgupload"
						:limit="2"	
						:on-remove="handleRemove"
						:on-change="cg"
						:show-file-list="true"
					>
						<div class="iconfont icon-yunshangchuan_o">上传</div>
					</el-upload>
				</el-form-item>
				<el-form-item label="上线时间" :label-width="formLabelWidth1">
					<el-date-picker
						v-model="xinxi.addproject.online_time"
						type="datetime"
						placeholder="年/月/日-:-"
						value-format="YYYY/MM/DD hh:mm:ss"
					/>
				</el-form-item>
			</el-form>
			<div class="line"></div>

			<template #footer>
				<span class="dialog-footer">
					<el-button
						@click="(dialogFormVisible = false), (cpwd = false)"
						class="cancel"
						>取消</el-button
					>
					<el-button
						type="primary"
						@click="addproject(), (cpwd = false)"
						class="save"
						>保存</el-button
					>
				</span>
			</template>
		</el-dialog>
	</div>

	<!-- 修改项目弹出框 -->
	<div class="dialogs userDialog">
		<el-dialog v-model="edit" title="修改项目">
			<div class="line4"></div>
			<el-form :model="addform">
				<el-form-item label="项目名称" :label-width="formLabelWidth1">
					<el-input
						v-model="xinxi.editproject.project_name"
						autocomplete="off"
						placeholder="请输入项目名称"
					/>
				</el-form-item>
				<el-form-item label="城市/省份" :label-width="formLabelWidth1">
					<el-cascader
						size="large"
						:options="xinxi.options"
						@change="qweqwe"
					>
					</el-cascader>
				</el-form-item>
				<el-form-item label="功能" :label-width="formLabelWidth1">
					<el-select
						v-model="xinxi.editproject.function"
						class="m-2"
						placeholder="请选择项目的功能"
						size="small"
					>
						<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="业主名称" :label-width="formLabelWidth1">
					<el-input
						v-model="xinxi.editproject.owner"
						autocomplete="off"
						placeholder="请输入业主名称"
					/>
				</el-form-item>
				<el-form-item label="总点数" :label-width="formLabelWidth1">
					<el-input
						v-model="xinxi.editproject.point"
						autocomplete="off"
						placeholder="请输入总点数"
					/>
				</el-form-item>
				<el-form-item label="上线时间" :label-width="formLabelWidth1">
					<el-date-picker
						v-model="xinxi.editproject.online_time"
						type="datetime"
						placeholder="年/月/日-:-"
						format="YYYY/MM/DD hh:mm:ss"
					/>
				</el-form-item>
			</el-form>
			<div class="line"></div>

			<template #footer>
				<span class="dialog-footer">
					<el-button
						@click="(dialogFormVisible = false), (cpwd = false)"
						class="cancel"
						>取消</el-button
					>
					<el-button
						type="primary"
						@click="editproject(), (cpwd = false)"
						class="save"
						>保存</el-button
					>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { regionData, CodeToText } from "element-china-area-data";
import { ProjectUpdate, addProject, ProjectList } from "@/api/model/login";
import { onMounted, reactive, ref, watch } from "vue";
const obj = reactive({
	page: 1,
	total: 0,
});
const formLabelWidth1 = ref(100);
const options = reactive([
	{
		label: "酒店",
		value: "酒店",
	},
	{
		label: "办公",
		value: "办公",
	},
	{
		label: "购物中心",
		value: "购物中心",
	},
	{
		label: "综合体",
		value: "综合体",
	},
	{
		label: "学校",
		value: "学校",
	},
	{
		label: "医院",
		value: "医院",
	},
	{
		label: "其他1",
		value: "其他1",
	},
	{
		label: "其他2",
		value: "其他2",
	},
	{
		label: "其他3",
		value: "其他3",
	},
]);
// const value1 = ref('')
const cpwd = ref(false);

const add = ref(false);
const edit = ref(false);

watch(
	() => obj.page,
	() => {
		getprojectData(obj.page);
	}
);
const dialogFormVisible = ref(false);
// const value = ref('')
const xinxi = reactive({
	options: regionData,
	selectedOptions: [],
	user: {},
	form: {},
	tableData: [],
	addproject: {
		city: "",
	},
	editproject: {},
});

const addform = reactive({
	projectName: "",
	city: "",
	fun: "",
	owner: "",
	allCount: "",
	onlineTime: "",
});
const fileList = ref([])
onMounted(() => {
	getprojectData(obj.page);
});
const handleupdate = (q, w) => {
	xinxi.editproject = w;
	edit.value = true;
};
const qweqwe = (e) => {
	xinxi.addproject.city = `${CodeToText[e[0]]}${CodeToText[e[1]]}${
		CodeToText[e[2]]
	}`;
};

function imgupload(e) {
	console.log(e, "1111111111111111111111");
	xinxi.addproject.img = e.data;
	fileList.value.push({
		name: e.data.split("/").at(-1),
		url: "http://oao.zhichengshangxin.com/" + e.data,
	});
}
const handleRemove = ()=>{
	fileList.value = []
}
const cg = (f,files)=>{
	if(files){
    fileList.value=files.slice(-1)
  }
}
const addproject = async () => {
	let res = await addProject(xinxi.addproject);
	console.log(res);
	if (res.status == 200) {
		// ElMessage({
		//   message: '添加成功',
		//   type: 'success',
		// })
		add.value = false;
	}
};
const editproject = async () => {
	let res = await ProjectUpdate(xinxi.editproject);
	console.log(res);
	if (res.status == 200) {
		// ElMessage({
		//   message: '修改成功',
		//   type: 'success',
		// })
		edit.value = false;
	}
};

const getprojectData = async (page) => {
	let res = await ProjectList({ page });
	xinxi.tableData = res.data.data;
	obj.total = res.data.total;
	console.log(xinxi.tableData);
};
</script>

<style scoped lang="less">
.pwd {
	height: 50%;
}
.smbtn {
	width: 80px;
	height: 30px;
}

.userDialog {
	:deep(.el-dialog__title) {
		color: rgb(81, 99, 167);
		font-size: 19px;
	}

	:deep(.el-dialog__close) {
		font-size: 27px !important;
		color: rgb(81, 99, 167);
	}

	:deep(.el-dialog__body) {
		padding: 20px 0 20px;
	}
}

.left {
	background-color: white;

	border-style: none;
	border-color: unset;
	box-shadow: rgb(77 98 165 / 10%) 0px 5px 20px 0px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 20px;
	font-weight: normal;
	font-style: normal;

	.title {
		padding: 20px;

		.word {
			font-family: SourceHanSansSC;
			font-weight: 550;
			font-size: 20px;
			color: rgb(77, 98, 165);
			font-style: normal;
			letter-spacing: 2px;
			line-height: 28px;
			text-decoration: none;
		}
	}

	.line {
		border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
	}

	.middle {
		padding: 20px;
		width: 100%;
		font-family: SourceHanSansSC;
		font-weight: 400;
		font-size: 16px;
		color: rgb(127, 127, 127);
		font-style: normal;
		letter-spacing: 0px;
		line-height: 22px;
		text-decoration: none;

		.mtop {
			display: flex;
			justify-content: space-between;

			.el-button {
				width: 104px;
				height: 30px;
				z-index: 698;
				background-color: rgb(147, 170, 222);
				color: white;
			}
		}

		.line2 {
			width: 100%;
			padding-left: 40px;
			padding-right: 40px;
			border-bottom: dashed rgb(220, 224, 238) 1px;
			height: 1px;
			margin: auto;
			margin: 30px 0px 30px 0px;
		}
	}

	.bottom {
		.Btop {
			display: flex;
			justify-content: space-between;
			padding: 10px 0px 10px 0px;

			.el-button {
				width: 104px;
				height: 30px;
				z-index: 698;
				background-color: rgb(147, 170, 222);
				color: white;
			}
		}

		.table {
			.el-button {
				width: 80px;
				height: 30px;
				background-color: rgb(143, 170, 220);
				border-style: none;
				border-color: unset;
				border-radius: 4px;
				font-size: 14px;
				padding: 0px;
				text-align: center;
				line-height: 20px;
				font-weight: normal;
				font-style: normal;
			}
		}

		.page {
			display: flex;
			justify-content: flex-end;
		}
	}
}

.dialog {
	.el-form {
		width: 246px;
		border-style: none;
		border-color: unset;
		border-radius: 8px;
		font-size: 14px;
		text-align: center;
		line-height: 20px;
		font-weight: normal;
		font-style: normal;
		padding-top: 20px;
		margin-left: 20px;
	}

	/deep/.el-input__inner {
		-webkit-appearance: none;
		appearance: none;
		background-color: var(--el-input-bg-color, var(--el-color-white));
		background-image: none;
		border-radius: var(
			--el-input-border-radius,
			var(--el-border-radius-base)
		);
		border: var(--el-input-border, var(--el-border-base));
		box-sizing: border-box;
		color: var(--el-input-text-color, var(--el-text-color-regular));
		display: inline-block;
		font-size: inherit;
		height: 30px;
		line-height: 32px;
		outline: 0;
		padding: 0 11px;
		transition: var(--el-transition-border);
		width: 200px;
	}

	.userimg {
		.mask {
			// margin-top: 20px;
			position: absolute;
			top: 20px;
			background-color: rgba(0, 0, 0, 0.3);
		}

		img {
			width: 55px;
			height: 55px;
			border-radius: 100%;
		}

		// padding-top: 30px;
		margin: auto;
		width: 55px;
		height: 55px;
		border-radius: 100%;

		background-color: thistle;
		position: relative;
		// top: 20px;

		/* 而是显示元素 */
	}

	.userimg1 {
		background-color: rgba(27, 109, 204, 0.7);

		.qwe {
			margin-left: 15px;
		}

		.mask {
			font-size: 12px;
			width: 55px;
			height: 55px;
			border-radius: 100%;
			// background-color: rgba(27, 109, 204, 0.7);
			// margin-top: 20px;
			position: absolute;
			top: 20px;
			margin-bottom: 10px;

			img {
				width: 45px;
				height: 45px;
				position: absolute;
				top: -18px;
				left: 6px;
			}
		}

		img {
			width: 55px;
			height: 55px;
			border-radius: 100%;
		}

		// padding-top: 30px;
		margin: 0 auto;
		width: 55px;
		height: 55px;
		border-radius: 100%;

		background-color: thistle;
		position: relative;
		// top: 20px;

		/* 而是显示元素 */
	}

	/deep/ .el-form-item__label {
		font-family: SourceHanSansSC;
		font-weight: 400;
		font-size: 14px;
		color: rgb(127, 127, 127);
		font-style: normal;
		letter-spacing: 0px;
		line-height: 20px;
		text-decoration: none;
		padding-right: 30px;
	}
}

.dialogs {
	/deep/.el-dialog {
		--el-dialog-width: 410px;
		--el-dialog-margin-top: 15vh;
		--el-dialog-bg-color: var(--el-color-white);
		--el-dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
		--el-dialog-title-font-size: var(--el-font-size-large);
		--el-dialog-content-font-size: 14px;
		--el-dialog-font-line-height: var(--el-font-line-height-primary);
		--el-dialog-padding-primary: 20px;
		position: relative;
		margin: var(--el-dialog-margin-top, 15vh) auto 50px;
		background: var(--el-dialog-bg-color);
		border-radius: 8px;
		box-shadow: var(--el-dialog-box-shadow);
		box-sizing: border-box;
		width: var(--el-dialog-width, 410px);
	}

	/deep/.line4 {
		border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
	}

	/deep/.el-input {
		width: 200px;
	}

	.el-form {
		width: 246px;
		border-style: none;
		border-color: unset;
		border-radius: 8px;
		font-size: 14px;
		text-align: center;
		line-height: 20px;
		font-weight: normal;
		font-style: normal;
		padding-top: 20px;
		margin-left: 40px;
	}

	/deep/.el-input__inner {
		left: 870px;
		top: 428px;
		height: 30px;
		border-radius: 4px;
		color: rgba(204, 204, 204, 100);
		font-size: 14px;
		text-align: left;
		font-family: Microsoft Yahei;
		border: 1px solid rgba(204, 204, 204, 100);
		line-height: 32px;
		outline: 0;
		padding: 0 11px;
		transition: var(--el-transition-border);
		width: 250px;
	}

	.userimg {
		padding-top: 30px;
		margin: auto;
		width: 55px;
		height: 55px;
		border-radius: 100%;
		background-color: thistle;
	}

	/deep/ .el-form-item__label {
		left: 790px;
		top: 433px;
		width: 57px;
		height: 20px;
		color: rgba(127, 127, 127, 100);
		font-size: 14px;
		text-align: left;
		font-family: SourceHanSansSC-regular;
	}
}

.chpwd {
	margin-left: 50px;
	left: 1037px;
	top: 633px;
	width: 56px;
	height: 20px;
	color: rgba(77, 98, 165, 100);
	font-size: 14px;
	text-align: left;
	font-family: SourceHanSansSC-regular;
	/deep/ span {
		color: #4d62a5 !important;
		display: inline-flex;
		align-items: center;
	}
}

.line3 {
	border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
	margin-bottom: 30px;
}

.cancel {
	left: 917px;
	top: 696px;
	width: 80px;
	height: 30px;
	line-height: 20px;
	border-radius: 4px;
	background-color: rgba(204, 204, 204, 100);
	text-align: center;
	border: none;
}

.save {
	left: 1013px;
	top: 696px;
	width: 80px;
	height: 30px;
	line-height: 20px;
	border-radius: 4px;
	background-color: rgba(143, 170, 220, 100);
	text-align: center;
	border: none;
}
</style>
<style scoped lang="less">
/deep/.el-dialog {
	--el-dialog-width: 346px;
	--el-dialog-margin-top: 15vh;
	--el-dialog-bg-color: var(--el-color-white);
	--el-dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	--el-dialog-title-font-size: var(--el-font-size-large);
	--el-dialog-content-font-size: 14px;
	--el-dialog-font-line-height: var(--el-font-line-height-primary);
	--el-dialog-padding-primary: 20px;
	position: relative;
	margin: var(--el-dialog-margin-top, 15vh) auto 50px;
	background: var(--el-dialog-bg-color);
	border-radius: var(--el-border-radius-small);
	box-shadow: var(--el-dialog-box-shadow);
	box-sizing: border-box;
	width: var(--el-dialog-width, 346px);
}

/deep/.el-table tr {
	background-color: rgb(246, 250, 255);
}

.el-row {
	margin-bottom: 20px;
}

.el-row:last-child {
	margin-bottom: 0;
}

.el-col {
	border-radius: 4px;
}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
}

/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
	border-bottom: white 4px solid !important;
}

.example-pagination-block + .example-pagination-block {
	margin-top: 10px;
}

.example-pagination-block .example-demonstration {
	margin-bottom: 16px;
}

/deep/.el-button > span {
	color: white;
	display: inline-flex;
	align-items: center;
}
</style>
